﻿<template>
    <div class="app-container">

        <!-- 搜索区-->
        <el-form :model="queryParams" ref="queryForm"  :inline="true">
            <el-form-item label="菜单名称" class="item">
                <el-input
                        v-model="queryParams.menuName"
                        placeholder="请输入菜单名称"
                        clearable
                        size="small"
                        style="width: 240px"
                        @keyup.enter.native="load"
                />
            </el-form-item>
            <el-form-item>
                <el-button type="primary" icon="el-icon-search" size="mini" @click="load">搜索</el-button>
                <el-button icon="el-icon-refresh" size="mini" @click="reset" >重置</el-button>
            </el-form-item>
        </el-form>


        <!--按钮区域    -->
        <el-row :gutter="10" class="mb8"   style="margin:5px">
            <el-button plain  size="mini" @click="handleExpand"><i class="el-icon-sort"></i>&nbsp;展开/折叠</el-button>
        </el-row>


        <!-- 列表区-->
        <el-table :data="tableTreeData" row-key="menuId" ref="dataTreeList" :header-cell-style="{background:'#F8F8F9'}"  :tree-props="{children: 'children', hasChildren: 'hasChildren'}">

            <el-table-column prop="menuName" label="菜单名称" align="center"></el-table-column>
            <el-table-column prop="icon" label="图标" align="center">
                <template #default="scope">
                    <i :class="scope.row.icon"></i>
                </template>
            </el-table-column>
            <el-table-column prop="name" label="名称" align="center"></el-table-column>
            <el-table-column prop="url" label="菜单路径" align="center"></el-table-column>
            <el-table-column fixed="right" label="操作" width="260">
                <template #default="scope">
                    <button type="button" class="el-button el-button--text el-button--mini"><!----><i class="el-icon-edit"></i><span>修改</span></button>

                    <button type="button" @click="add(scope.row)" class="el-button el-button--text el-button--mini"><!----><i class="el-icon-plus"></i><span>新增</span></button>

                    <button type="button" @click="handleDelete(scope.row)" class="el-button el-button--text el-button--mini"><!----><i class="el-icon-delete"></i><span style="color:red">删除</span></button>

                </template>
            </el-table-column>
        </el-table>

        <el-dialog :title="title" :visible.sync="dialogVisible" width="30%" :append-to-body="true" >
            <el-form ref="menu" :model="menu" label-width="120px">
                <el-form-item label="上级菜单">
                    <treeselect  v-model="menu.pid" :multiple="false" :normalizer="normalizer"  :options="menuOptions" placeholder="选择上级菜单"/>

                </el-form-item>

                <el-form-item label="菜单名称:">
                    <el-input v-model="menu.menuName" style="width:80%"></el-input>
                </el-form-item>
                <el-form-item label="菜单类型:">
                    <el-radio v-model="menu.menuType" value="1">目录</el-radio>
                    <el-radio v-model="menu.menuType" value="2">菜单</el-radio>
                </el-form-item>

                <el-form-item label="菜单图标:">
                    <el-input v-model="menu.icon"   style="width:80%"></el-input>
                </el-form-item>

                <el-form-item label="菜单路由:">
                    <el-input v-model="menu.url" style="width:80%"></el-input>
                </el-form-item>

            </el-form>
            <template #footer>
              <span class="dialog-footer">
                <el-button @click="cancel">取 消</el-button>
                <el-button type="primary" @click="save">确 定</el-button>
              </span>
            </template>
        </el-dialog>
    </div>
</template>

<script>
    import request from "../utils/request";
    import Treeselect from '@riophae/vue-treeselect'
    import '@riophae/vue-treeselect/dist/vue-treeselect.css'
    export default {
        name: "Menu",
        components: {Treeselect},

        created() {
            this.load()
        },
        data() {
            return {

                title: '',
                dialogVisible: false,
                tableTreeData: [],
                menu: {},
                //vue_treeSelect
                menuOptions: [],
                highLightColor: "#fc1944",
                //icon组件
                icon: '',
                zIndex: 3500,

                // 查询参数
                queryParams: {
                    menuName: '',
                },
            }
        },
        methods: {
            load() {
                let user=JSON.parse(sessionStorage.getItem("user"));
                request.get("/sys/menuTree/"+user.id).then(res => {
                    this.tableTreeData = res.data
                })
            },


            //获取下拉树
            getTreeSelect() {
                let user=JSON.parse(sessionStorage.getItem("user"));
                request.get("/sys/menuTree/"+user.id).then(res => {
                    this.menuOptions = res.data
                })
            },


            //新增打开弹窗方法
            add(row) {
                this.menu = {}; //清空表单中的值
                this.getTreeSelect();
                if (row != null && row.menuId) {
                    this.menu.pid = row.menuId;
                } else {
                    this.menu.pid = 0;
                }
                this.dialogVisible = true;
                this.title = "新增"
            },

            save() {
                request.post("/sys/saveMenu", this.menu).then(res => {
                    this.$message({
                        type: "success",
                        message: res.msg
                    })
                    this.dialogVisible = false;    //最后关闭弹窗

                })
                this.load();  //完成后，重新刷新表格数据
            },

            //列表删除提示框
            handleDelete(row) {
                this.$confirm('确定删除吗, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning',
                }).then(() => {
                    request.delete("/sys/delMenu/" + row.menuId).then(res => {

                        if (res.code === '0') {
                            this.$message({
                                type: "success",
                                message: "删除成功"
                            })
                        } else {
                            this.$message({
                                type: "error",
                                message: res.msg
                            })
                        }
                        this.load()
                    })
                })
            },


            /** 转换菜单数据结构 */
            normalizer(node) {
                if (node.children && !node.children.length) {
                    delete node.children;
                }
                return {
                    id: node.menuId,
                    label: node.menuName,
                    children: node.children
                };
            },

            cancel() {
                this.dialogVisible = false;
                this.menu = {};
            },



            // 是否展开table(展开与折叠切换)
            handleExpand() {
                this.isExpand = !this.isExpand
                this.$nextTick(() => {
                    this.forArr(this.tableTreeData, this.isExpand)
                })
            },

            // 遍历
            forArr(arr, isExpand) {
                arr.forEach(i => {
                    // toggleRowExpansion(i, isExpand)用于多选表格，切换某一行的选中状态，如果使用了第二个参数，则是设置这一行选中与否（selected 为 true 则选中）
                    this.$refs.dataTreeList.toggleRowExpansion(i, isExpand)
                    if (i.children) {
                        this.forArr(i.children, isExpand)
                    }
                })
            },

            /** 重置按钮操作 */
            reset() {
                this.queryParams = {};
            },

        }

    }
</script>

<style scoped>



</style>
